<template>
  <div class="friend-container">
    <!-- 头部 -->
    <Header></Header>
    <main-container>
      <!-- 主要内容区域 -->
      <div class="container">
        <!-- 主图 -->
        <div class="main-image">
          <el-image class="main-bg" :src="aboutBg" draggable="false"/>
          <div class="main-div">
            <h1>友链</h1>
            <p>岁月无路可退，惟愿殊途同归</p>
          </div>
        </div>
        <!-- 内容区域 -->
        <div class="main-content">
          <!-- 本站信息 -->
          <div>
            <h2> 链接申请说明</h2>
            <p>交换友链可在下方点击留言.本站链接如下：</p>
            <p>名称：xu的博客</p>
            <p>网址：https://xuwang.info</p>
            <p>图标：http://cdn.xuwang.info/logo/logo.png</p>
            <br>
            <p>申请自动通过,若有意外,请私信我.(各种额外因素)</p>
          </div> <br>

          <div class="friend-list">
            <div @click="openFriendDialog">
              <el-image :src="plusImg" class="add-friend-logo"></el-image>
            </div>
            <div
                v-for="(item,index) in friendList"
                :key="'friend_'+index"
                @click="goFriend(item.linkUrl)"
            >
              <el-image :src="item.logoUrl" class="friend-logo"/>
              {{item.friendName}}
            </div>
          </div>
        </div>
      </div>
    </main-container>

    <el-dialog
        draggable
        v-model="friendDialog"
        title="互友中"
        width="30%"
    >
      <el-form
          :model="friendForm"
          label-width="100px"
          ref="friendFormRef"
          :rules="friendFormRules"
      >
        <el-form-item label="网站名称" prop="friendName">
          <el-input v-model="friendForm.friendName" />
        </el-form-item>
        <el-form-item label="网址" prop="linkUrl">
          <el-input v-model="friendForm.linkUrl" />
        </el-form-item>
        <el-form-item label="网站logo" prop="logoUrl">
          <el-input v-model="friendForm.logoUrl" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFriend">提交</el-button>
          <el-button @click="friendDialog=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import MainContainer from "@/components/MainContainer/MainContainer";
import aboutBg from "@/assets/images/bg/about-bg.jpg";
import plusImg from "@/assets/images/icon/plus.png";
import { addFriendApi, listAllFriendApi } from "@/api/friend";

import { ref } from "vue";
import {ElMessage} from "element-plus";
import store from "@/store";

let friendFormRef = ref(null);
// 加载友链
getFriendList();
// 友链验证规则
let friendFormRules = {
  friendName:[
    {required: true, message: '请输入网站名称', trigger: 'blur'}
  ],
  linkUrl:[
    {required: true, message: '请输入网址', trigger: 'blur'}
  ],
  logoUrl:[
    {required: true, message: '请输入网站logo', trigger: 'blur'}
  ],
}

/** 友链列表 */
const friendList = ref([])

function getFriendList(){
  listAllFriendApi().then(res=>{
    if(res.code === 200){
      friendList.value = res.data;
    }
  })
}

/** 友链弹窗 */
let friendDialog = ref(false);

/** 友链对象 */
const friendForm = ref({})

/** 打开友链弹窗 */
function openFriendDialog(){
  friendDialog.value = true;
}

/** 友链提交 */
function submitFriend(){
  friendFormRef.value.validate((valid, fields) => {
    if (valid) {
      addFriendApi(friendForm.value).then(async () => {
        ElMessage({
          message: '新增成功',
          type: 'success',
        });
        friendList.value.push(friendForm.value);
        await store.dispatch('updateStationInfo');
        friendDialog.value = false;
      })
    }
  })
}

/** 去友链界面 */
function goFriend(linkUrl){
  window.open(linkUrl, '_blank');
}
</script>

<style scoped>
@import "../assets/css/friend.css";

:deep(.el-dialog){
  border-radius: 20px;
}
</style>
